<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/index/demo.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/index/zTreeStyle.css" />
<style type="text/css">
.Hui-iconfont{
	text-decoration: underline;
}
</style>
<title>后台角色管理</title>
</head>
<body>
	<div class="page-container">
		<div> 
			<div>
				<input type="text" id="entNo" placeholder="角色名称" style="width:215px" class="input-text">
				<button class="btn btn-success" type="submit" onclick="reloadData()"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
			</div>
		</div>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l"> 
				<a href="javascript:;" onclick="addOrUpdate('新增角色','${ctx}/role/saveOrUpdateIndex','','215')" class="btn btn-primary radius">
					<i class="Hui-iconfont">&#xe600;</i> 新增用户
				</a>
			</span>
		</div>
		<div class="mt-20">
			<table id="dataTable" class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="20%">角色编码</th>
						<th width="25%">角色名称</th>
						<th width="15%">角色类型</th>
						<th width="10%">创建人</th>
						<th width="20%">操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="${ctx}/static/plug/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/jquery/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/jquery/jquery.ztree.excheck.js"></script>
	<script type="text/javascript">
		var dataTable;
		$(function() {
			dataTable = $("#dataTable").DataTable($.extend(true, {}, TABLE_CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
				"ajax" : function(data, callback, settings) {
					var param = getQueryParam(data);
					$.ajax({
						type : "POST",
						url : "${ctx}/role/list",
						cache : false, //禁用缓存
						data : param, //传入已封装的参数
						dataType : "json",
						success : function(result) {
							console.log(result)
							callback(result);
						},
						error : function(XMLHttpRequest, textStatus, errorThrown) {
							alert("查询失败");
						}
					});
				},
				
				"columns" : [{
					"data" : "id"
				},{
					"data" : "name"
				},{
					"data" : "typeStr"
				},{
					"data" : "operatorName"
				},{
					"data" : null
				}],
				"columnDefs" : [{
					targets : 4,
					render : function(a, b, c, d) {
						var html = genOperatirHtml(c.status, c.id ,c);
						return html;
					}
				} ]
			}));
		});

		function genStatusHtml(status) {
			var html = "";
			if (status == 1) {
				html += "<span class=\"label label-success radius\">有效</span>";
			} else if (status == 0) {
				html += "<span class=\"label radius\">无效</span>";
			}
			return html;
		}
		

		function genOperatirHtml(status, id, obj) {
			var html = "";
			if(obj.type != 3) {
				if (status == 1) {
					html += "<a style=\"text-decoration:none\" onClick=\"changeStatus(this, 0 ,'" + id
							+ "')\" href=\"javascript:;\" title=\"停用\">";
					html += "<i class=\"Hui-iconfont\" style=\"text-decoration: none;\">&#xe631;</i></a> ";
				} else if (status == 0) {
					html += "<a style=\"text-decoration:none\" onClick=\"changeStatus(this, 1 ,'" + id
							+ "')\" href=\"javascript:;\" title=\"启用\">";
					html += "<i class=\"Hui-iconfont\">&#xe615;</i></a> ";
				}
				
				html += "<a title=\"编辑\" href=\"javascript:;\" onclick=\"addOrUpdate('编辑','${ctx}/role/saveOrUpdateIndex?roleId="
					+ id + "','','215')\" class=\"ml-5\" style=\"text-decoration:none\">";
				html += "<i class=\"Hui-iconfont\">编辑</i></a> ";
				
				html += "<a title=\"删除\" href=\"javascript:;\" onclick=\"changeStatus(this,-1,'"+ id 
						+ "')\" class=\"ml-5\" style=\"text-decoration:none\">";
				html += "<i class=\"Hui-iconfont\">删除</i></a> ";
			}
			return html;
		}
		

		function getQueryParam(data) {
			var param = {};
			var entNo = $("#entNo").val();
			var status = $("#status").val();
			if (entNo) {
				param.entNo = entNo;
			}
			
			if (status) {
				param.status = status;
			}

			//自定义的查询条件 后面加
			param.draw = data.draw;
			param.startIndex = data.start;
			param.pageSize = data.length;
			return param;
		}

		function reloadData(resetPage) {
			dataTable.ajax.reload(null,resetPage);
		}
		
		function addOrUpdate(title,url,width,height) {
			layer_show(title,url,width,height);
		}
		
		function reloadData(resetPage) {
			dataTable.ajax.reload(null,resetPage);
		}
		
		function changeStatus(obj, status, id) {
			var title = "";
			if (0 === status) {
				title = "确认要停用该用户吗？";
			} else if (1 == status) {
				title = "确认要激活该用户吗？";
			} else if (-1 == status) {
				title = "确认要删除该角色吗？";
			}

			var param = {};
			param.id = id;

			layer.confirm(title, {}, function(index) {
				$.ajax({
					type : 'POST',
					url : '${ctx}/role/delRole',
					data : param,
					dataType : 'json',
					success : function(data) {
						layer.close(index);
						if (data.result) {
							reloadData(false);
						} else {
							layer.msg(data.errorMsg);
						}
					},
					error : function(data) {
						layer.close(index);
						layer.msg(data.errorMsg);
					},
				});
			}, function() {
			});
		}
	</script>
</body>
</html>
